<template>
    <div class="kx-wrapper">
      <v-title ref="title" class="v-title"><span slot="title-name">康熙字典</span></v-title>
      <div class="main-wrapper" ref="container">
        <!-- 搜索框 -->
        <div class="search-wrapper pr">
          <div class="search-box">
            <div class="search-condition inline" @click="extendOption">
              <span class="condition inline">{{condition}}</span>
              <span class="condition-icon inline border-1px-right"></span>
            </div>
            <div class="search-input inline">
              <input type="text" :readonly="readonly" :maxlength="nums" @focus="showSelect" v-model="searchValue">
            </div>
            <div class="search-icon inline" @click="getSearch"></div>
          </div>
          <!-- 搜索条件 -->
          <div class="condition-wrapper pa" v-show="showCon">
            <p class="tc" :class="{active:condition === '按拼音'}" @click="changeCondition('按拼音')">按拼音</p>
            <p class="tc" :class="{active:condition === '按汉字'}" @click="changeCondition('按汉字')">按汉字</p>
            <p class="tc" :class="{active:condition === '按笔画'}" @click="changeCondition('按笔画')">按笔画</p>
          </div>
          <!-- 选择拼音 -->
          <div class="py-wrapper pa" v-show="showPy">
            <span class="arrow pa"></span>
            <ul>
              <li v-for="item in words" @click="selectWord(item)">{{item}}</li>
            </ul>
          </div>
          <!-- 选择笔画 -->
          <div class="bh-wrapper pa" v-show="showBh">
            <span class="arrow pa"></span>
            <ul>
              <li v-for="item in 39" @click="selectWord(item)">{{item}}画</li>
            </ul>
          </div>
        </div>
        <!-- 搜索结果 -->
        <div class="result-wrapper">
          <!-- 搜索拼音和搜索笔画结果 -->
          <div class="py-bh-result" v-show="showPyBhResult">
            <div class="tab-wrapper">
              <span class="inline tc jt-tab" :class="{active:showJt}" @click="changeForm">简体</span>
              <span class="inline tc ft-tab" :class="{active:!showJt}" @click="changeForm">繁体</span>
            </div>
            <div class="result-detail">
              <ul>
                <li class="inline tc" v-for="item in data" @click="showSlide(item)">{{item}}</li>
              </ul>
            </div>
          </div>
          <!-- 搜索汉字结果 -->
          <div class="hz-result" v-show="showHzResult">
            <div class="hz-top-desc border-1px-bottom">
              <div class="left inline tc">{{hz.zi}}</div>
              <div class="right inline">
                <p>【{{hz.pinyin}}】</p>
                <p class="row">主部首：{{hz.zhubushou}}<span>笔画：{{hz.bihua}}</span></p>
                <p class="row">康熙字典笔画：{{hz.kangxibihua}}</p>
              </div>
            </div>
            <div class="hz-bottom-desc">
              <p>繁体字 <span class="ft-span inline pr tc">{{hz.fanti}}</span></p>
              <p>康熙字典解释</p>
              <div class="kx-desc desc">{{hz.kangxinjieshi}}</div>
              <p>现代字典解释</p>
              <div class="xd-desc desc tj">{{hz.xiandaiwenjieshi}}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧slide -->
      <transition name="slide">
        <div class="slide-wrapper pf" v-show="isShow">
          <div class="title-wrapper">
            <div class="title tc" @click="isShow = false">
              康熙字典
              <i class="pa back-icon"></i>
            </div>
          </div>
          <div class="hz-result">
            <div class="hz-top-desc border-1px-bottom">
              <div class="left inline tc">{{hz.zi}}</div>
              <div class="right inline">
                <p>【{{hz.pinyin}}】</p>
                <p class="row">主部首：{{hz.zhubushou}}<span>笔画：{{hz.bihua}}</span></p>
                <p class="row">康熙字典笔画：{{hz.kangxibihua}}</p>
              </div>
            </div>
            <div class="hz-bottom-desc">
              <p>繁体字 <span class="ft-span inline pr tc">{{hz.fanti}}</span></p>
              <p>康熙字典解释</p>
              <div class="kx-desc desc">{{hz.kangxinjieshi}}</div>
              <p>现代字典解释</p>
              <div class="xd-desc desc tj">{{hz.xiandaiwenjieshi}}</div>
            </div>
          </div>
        </div>
      </transition>
    </div>
</template>

<script>
    import Title from '@/components/title/Title'
    import AsyncJson from '@/common/js/async'
    import Toast from '@/common/js/toast'

    export default {
        name: "Kx",
        data() {
            return {
              condition:"按拼音",
              readonly:true,
              showCon:false,
              showPy:false,
              showBh:false,
              showJt:true,
              showPyBhResult:false,
              showHzResult:false,
              isShow:false,
              nums:1,
              searchValue:"",
              words:["a","b","c","d","e","f","g","h","j","k","l","m","n","o","p","q","r","s","t","w","x","y"],
              tempData:{},
              data:[],
              hz:{}
            }
        },
        components:{
          "v-title":Title
        },
        methods: {
          setHeight(){
            this.$refs.container.style.minHeight = document.documentElement.clientHeight - this.$refs.title.$el.clientHeight + "px";
          },
          extendOption(){
            this.showCon = !this.showCon;
            // 隐藏笔画，拼音
            this.showPy = false;
            this.showBh = false;
          },
          changeCondition(con){
            this.condition = con;
            this.showCon = false;
            this.searchValue = "";
            con === '按汉字' ? this.readonly = false : this.readonly = true;
            con === '按笔画' ? this.nums = 2 : this.nums = 1;
          },
          showSelect(){
            this.showCon = false;
            if(this.condition === '按拼音'){
              this.showPy = true;
              this.showCon = false;
            }
            if(this.condition === '按笔画'){
              this.showBh = true;
              this.showCon = false;
            }
          },
          selectWord(item){
            this.searchValue = item;
          },
          getSearch(){
            this.showPy = false;
            this.showBh = false;
            if(this.condition === '按笔画'){
              this.getPyBhData("dict/searchliteralbystroke",{strokenum:this.searchValue});
            }
            if(this.condition === '按拼音'){
              this.getPyBhData("dict/searchliteralbyspell",{spell:this.searchValue});
            }
            if(this.condition === '按汉字'){
              this.showPyBhResult = false;
              this.getHzData();
            }
          },
          changeForm(){
            this.showJt = !this.showJt;
            if(this.showJt){
              this.data = this.tempData.Simplified;
            }else{
              this.data = this.tempData.Traditional;
            }
          },
          getPyBhData(url,data){
            if(this.searchValue === ""){
              Toast("内容不能为空");
              return;
            }
            this.showJt = true;
            AsyncJson("POST",url, data).then( res => {
              if(res.status === "000"){
                this.tempData = res.data;
                this.data = res.data.Simplified;
                this.showHzResult = false;
                this.showPyBhResult = true;
              }else{
                Toast(res.data);
              }
            }).catch( err => {
              console.log(err);
            })
          },
          getHzData(){
            if(this.searchValue === ""){
              Toast("内容不能为空");
              return;
            }
            AsyncJson("POST","dict/literalmeaning", {literal:this.searchValue}).then( res => {
              if(res.status === "000"){
                this.showPyBhResult = false;
                this.showHzResult = true;
                this.hz = res.data;
              }else{
                Toast(res.data);
              }
            }).catch( err => {
              console.log(err);
            })
          },
          showSlide(item){
            AsyncJson("POST","dict/literalmeaning", {literal:item}).then( res => {
              if(res.status === "000"){
                this.hz = res.data;
                this.isShow = true;
              }else{
                Toast(res.data);
              }
            }).catch( err => {
              console.log(err);
            })
          }
        },
        mounted(){
          this.setHeight();
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylu/index.styl"

  .kx-wrapper
    padding-top 100px
    .main-wrapper
      padding 0 30px
      background url("../wg/wu-bg.png") no-repeat center center
      background-size cover
    .slide-wrapper
      top 0
      right 0
      width 100%
      height 100%
      background url("../wg/wu-bg.png") no-repeat center center
      background-size cover
      z-index 10
      .title-wrapper
        height 100px
        .title
          height 100px
          line-height 100px
          font-size 36px
          background #eeeeee
          .back-icon
            top 0
            left 0
            width 80px
            height 100px
            background url("../title/back-icon.png") no-repeat center center
            background-size 20px 36px
      .hz-result
        width 690px
        margin 20px auto 0
        padding 70px 0
        background #ffffff
        max-height 920px
        overflow-y: auto
        -webkit-overflow-scrolling: touch
        .hz-top-desc
          padding 0 0 30px 40px
          font-size 0
          border-1px-bottom(#d7bc93)
          .left
            width 102px
            height 102px
            font-size 60px
            line-height 100px
            background url("./fang.png") no-repeat center center
            background-size cover
            margin-right 60px
          .right
            font-size 24px
            p
              margin-bottom 4.5px
            .row
              padding-left 10px
              span
                margin-left 30px
        .hz-bottom-desc
          padding 48px 0 0 48px
          p
            padding-left 24px
            height 28px
            line-height 28px
            font-size 28px
            border-left 4px solid #d7bc93
            &:first-child
              margin-bottom 50px
            .ft-span
              width 50px
              height 50px
              top -11px
              font-size 30px
              line-height 50px
              margin-left 18px
              background url("./fang.png") no-repeat center center
              background-size cover
          .desc
            margin-top 20px
            margin-bottom 50px
            padding 0 28px
            font-size 24px
            line-height 38px
    .slide-enter-active, .slide-leave-active
      transition: right .3s
    .slide-enter, .slide-leave-to
      right: -100%
    .search-wrapper
      padding-top 90px
      .search-box
        height 90px
        border-radius 45px
        background #ffffff
        font-size 0
        .search-condition
          height 90px
          line-height 90px
          .condition
            padding-left 30px
            font-size 28px
            color #a7a7a7
          .condition-icon
            height 60px
            width 50px
            margin-top 18px
            background url("./sanjiao.png") no-repeat center center
            background-size 24px 16px
            border-1px-right(#bfbfbf)
        .search-input
          width 406px
          height 90px
          input
            border none
            outline none
            width 100%
            text-align center
            font-size 28px
            height 36px
            line-height 36px
            margin-top 33px
        .search-icon
          width 110px
          height 90px
          background url("./search-icon.png") no-repeat center center
          background-size 43px 43px
      .condition-wrapper
        bottom -260px
        left 0
        width 690px
        height 230px
        background #ffffff
        padding-top 10px
        box-shadow: 0 0 9px 3px rgba(141,141,141,0.2)
        z-index 2
        p
          font-size 28px
          color #a7a7a7
          padding 15px 0
          &.active
            font-size 36px
            color #d7bc93
      .py-wrapper
        bottom -320px
        left 0
        z-index 2
        width 690px
        background #ffffff
        box-shadow: 0 0 9px 3px rgba(141,141,141,0.2)
        .arrow
          left 333px
          top -12px
          width: 0
          height: 0
          border-bottom: 12px solid #ffffff
          border-left: 12px solid transparent
          border-right: 12px solid transparent
        ul
          font-size 0
          padding 10px 0
          li
            display inline-block
            vertical-align top
            font-family PingFang-SC-Medium
            font-size 36px
            width 115px
            height 65px
            text-align center
            line-height 65px
      .bh-wrapper
        bottom -520px
        left 0
        z-index 2
        width 690px
        background #ffffff
        box-shadow: 0 0 9px 3px rgba(141,141,141,0.2)
        .arrow
          left 333px
          top -12px
          width: 0
          height: 0
          border-bottom: 12px solid #ffffff
          border-left: 12px solid transparent
          border-right: 12px solid transparent
        ul
          font-size 0
          padding 10px 0
          li
            display inline-block
            vertical-align top
            font-family PingFang-SC-Medium
            font-size 28px
            width 115px
            height 65px
            text-align center
            line-height 65px
    .result-wrapper
      padding-top 40px
      .py-bh-result
        padding-top 30px
        background #ffffff
        .tab-wrapper
          font-size 0
          width 360px
          height 50px
          margin 0 auto
          span
            width 180px
            height 50px
            font-size 24px
            line-height 50px
            background #ffe9c8
            &.active
              background #e12323
              color #ffffff
          .jt-tab
            border-radius 8px 0 0 8px
          .ft-tab
            border-radius 0 8px 8px 0
        .result-detail
          margin-top 40px
          padding-bottom 20px
          max-height 620px
          overflow-y: auto
          -webkit-overflow-scrolling: touch
          ul
            font-size 0
            li
              width 80px 
              height 80px
              line-height 80px
              font-size 45px
              margin 0 0 30px 30px
              background url("./fang.png") no-repeat center center
              background-size cover
      .hz-result
        padding 70px 0
        background #ffffff
        max-height 620px
        overflow-y: auto
        -webkit-overflow-scrolling: touch
        .hz-top-desc
          padding 0 0 30px 40px
          font-size 0
          border-1px-bottom(#d7bc93)
          .left
            width 102px
            height 102px
            font-size 60px
            line-height 100px
            background url("./fang.png") no-repeat center center
            background-size cover
            margin-right 60px
          .right
            font-size 24px
            p
              margin-bottom 4.5px
            .row
              padding-left 10px
              span
                margin-left 30px
        .hz-bottom-desc
          padding 48px 0 0 48px
          p
            padding-left 24px
            height 28px
            line-height 28px
            font-size 28px
            border-left 4px solid #d7bc93
            &:first-child
              margin-bottom 50px
            .ft-span
              width 50px
              height 50px
              top -11px
              font-size 30px
              line-height 50px
              margin-left 18px
              background url("./fang.png") no-repeat center center
              background-size cover
          .desc
            margin-top 20px
            margin-bottom 50px
            padding 0 28px
            font-size 24px
            line-height 38px
</style>
